<section class="content-header">
    <h1>
        {{title}}
        <div class="btn-group pull-right">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#template">
                模版管理
            </button>
        </div>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3 col-md-push-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                            <i class="fa fa-remove"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label>模版</label>
                        <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="templateItems" displayExpr="templateName"
                            [(selectedItem)]="templateSel" [value]="templateItems[0]"
                            [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-md-pull-3">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">数据展示</h3>

                    <span>模版名称修改:</span>
                    <input type="text" [(ngModel)]="templateName">

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#areas">
                            启用区域至此模版
                        </button>
                        <button type="button" (click)="updateTemplate()" class="btn btn-info btn-sm" data-toggle="tooltip" title="更新此模版">
                            <i class="fa fa-save"></i>
                        </button>
                        <button type="button" class="btn btn-info btn-sm" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid #dataGrid [dataSource]="items" [showColumnLines]="true" [showRowLines]="true" 
                    [showBorders]="true" [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-paging [pageSize]="12"></dxo-paging>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column [allowEditing]="false" dataField="shiftId" caption="班次">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="hour" caption="小时">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="jph" caption="小时目标产量">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="grossJPH" caption="Gross JPH">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="workTime" caption="工作区间">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="restTime" caption="休息区间">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">问题过滤值设定</h3>
                    <div class="box-tools pull-right">
                        <button type="button" (click)="updateFilterValue()" class="btn btn-info btn-sm" data-toggle="tooltip" title="保存更新值">
                            <i class="fa fa-save"></i>
                        </button>
                        <button type="button" class="btn btn-info btn-sm" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid #dataGrid [dataSource]="filterItems" [showColumnLines]="true" [showRowLines]="true" 
                    [showBorders]="true" [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                        <dxo-paging [pageSize]="12"></dxo-paging>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column [allowEditing]="true" dataField="subArea" caption="区域">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="filterValue" caption="过滤值">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>

    <!--dialog start-->
    <div class="modal fade" id="template" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">添加模版
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs pull-right">
                            <li class="active">
                                <li>
                                    <a href="#other" data-toggle="tab">晚班</a>
                                </li>
                                <li>
                                    <a href="#week" data-toggle="tab">中班</a>
                                </li>
                                <li>
                                    <a href="#month" data-toggle="tab">早班</a>
                                </li>
                        </ul>
                        <div class="tab-content no-padding">
                            <div class="chart tab-pane active" id="month" style="position: relative; height: 500px;">
                                <dx-data-grid [dataSource]="dialogItems1" [showColumnLines]="true" [showRowLines]="true" 
                                [showBorders]="true" [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                                    <dxo-paging [pageSize]="20"></dxo-paging>
                                    <dxo-editing mode="cell" [allowUpdating]="true">
                                    </dxo-editing>
                                    <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                                    </dxo-pager>
                                    <dxi-column [allowEditing]="false" dataField="shiftId" caption="班次">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="false" dataField="hour" caption="小时">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="jph" caption="小时目标产量">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="grossJPH" caption="Gross JPH">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="workTime" caption="工作区间">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="restTime" caption="休息区间">
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                            <div class="chart tab-pane" id="week" style="position: relative; height: 500px;">
                                <dx-data-grid [dataSource]="dialogItems2" [showColumnLines]="true" [showRowLines]="true" 
                                [showBorders]="true" [rowAlternationEnabled]="true"[columnMinWidth]="50" [columnAutoWidth]="true">
                                    <dxo-paging [pageSize]="20"></dxo-paging>
                                    <dxo-editing mode="cell" [allowUpdating]="true">
                                    </dxo-editing>
                                    <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                                    </dxo-pager>
                                    <dxi-column [allowEditing]="false" dataField="shiftId" caption="班次">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="false" dataField="hour" caption="小时">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="jph" caption="小时目标产量">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="grossJPH" caption="Gross JPH">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="workTime" caption="工作区间">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="restTime" caption="休息区间">
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                            <div class="chart tab-pane" id="other" style="position: relative; height: 500px;">
                                <dx-data-grid [dataSource]="dialogItems3" [showColumnLines]="true" [showRowLines]="true" 
                                [showBorders]="true" [rowAlternationEnabled]="true" [columnMinWidth]="50" [columnAutoWidth]="true">
                                    <dxo-paging [pageSize]="20"></dxo-paging>
                                    <dxo-editing mode="cell" [allowUpdating]="true">
                                    </dxo-editing>
                                    <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                                    </dxo-pager>
                                    <dxi-column [allowEditing]="false" dataField="shiftId" caption="班次">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="false" dataField="hour" caption="小时">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="jph" caption="小时目标产量">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="grossJPH" caption="Gross JPH">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="workTime" caption="工作区间">
                                    </dxi-column>
                                    <dxi-column [allowEditing]="true" dataField="restTime" caption="休息区间">
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group pull-left">
                        <!-- <button type="button" class="btn btn-primary btn-sm" (click)="copySche()">
                            从作息复制
                        </button> -->
                        <span>从已有模版复制</span>
                        <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="templateItems1" displayExpr="templateName"
                            (onValueChanged)="onTemplateSelectedChange($event)"[(selectedItem)]="templateSel1" [value]="templateItems1[0]"
                            [searchEnabled]="true">
                        </dx-select-box>
                        <button type="button" class="btn btn-danger" (click)="delTempalte()">删除此模版</button>
                    </div>
                    <button type="button" class="btn btn-primary" (click)="saveTemplate()">编辑保存</button>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!--dialog end-->

    <!--dialog choose area-->
    <div class="modal fade" id="areas" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">选择区域</h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li *ngFor="let i of subAreas">
                            {{i}}
                            <input type="checkbox" [checked]="areaIsChecked(i)" (click)="chooseArea(i)">
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)="saveAreas()">保存</button>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
                </div>
            </div>

        </div>
    </div>
    <!--dialog end-->

</section>